<template>
	<view class="page-account-login">
		
		<view :style="'height:' + top + 'px;'" />
		<view class="loginindex">
			<view class="welcome">
				<text>欢迎使用绿书页~</text>
				登录之后可同步个人书架
			</view>
			<image class="loginpic" src="../../static/logo.png" mode="aspectFill" :preview="false"></image>
			
			<view class="pbin">
				<button @click="getUserInfo" class="loginbtn">微信一键登录</button>
				<button class="cancel" @click="clickToBack">取消</button>
			</view>
			
			<view :style="'height:' + $ba.safeAreaBottom() + 'px'"></view>
		</view>
	</view>
</template>

<script>
export default {
	components: {
		
	},
	computed: {
		top() {
			return this.$ba.safeAreaTop() + this.$ba.navHeight();
		}
	}, 
	data() {
		return {
			code:'',
		};
	},
	onShow(){
		this.getCode();
	},
	methods: {
		//登录成功
		succ(online) {
			let that = this;
			that.$tip.show('登录成功', 'succ');
			setTimeout(() => {
				that.$go.back();
			}, 600);
		},
		
		clickToBack() {
			this.$go.back();
		},
		getCode(){
			let that = this ;
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					that.code = loginRes.code;
				},
				fail:function(){
					that.$tip.alert('请刷新页面,重试');
				}
			});	
		} ,
		getUserInfo(e) {
			let that = this ;
			if(!this.code) return that.$tip.alert('请刷新页面,重试');
			
			uni.getUserProfile({
				desc: '用于完善用户资料', 
				success: (res) => {
					//用户没有授权
					if (!res.encryptedData) {
						that.$tip.alert('你拒绝了授权用户登录信息', 'fail');
						that.$loading.hide();
						return;
					}
					let post = {};
					post.code = this.code ; 
					post.appid = that.$appid;
					post.stag = that.$appstag;
					post.encrypteddata = res.encryptedData;
					post.iv = res.iv;
					
					that.$loading.show('登录中') ;
					
					that.$online.setOnlineKey('');
					that.$iapi.vapi('account/wxlogin', post, {
						succ: js => {
							if (!js.onlinekey) return that.$tip.show('网络错误，请重试', 'fail');
							
							that.$loading.show('登录中');
							
							that.$online.fetch(online => {
								that.$loading.hide();
								if (!online || !online.aid) return that.$tip.show('网络错误，请重试', 'fail');
								
								//成功
								that.$online.setOnlineKey(js.onlinekey);
								
								//
								getApp().globalData.appid = that.$appid ; 
								 
								//登录完成之后执行的动作
								that.$go.burl('my/index','switchTab') ;
							}, {
								appid: that.$appid,
								onlinekey: js.onlinekey
							});
							
						},
						ever: js => {
							that.getCode();
							that.$loading.hide();
						},
					});
				}
			}) ;
				
		},
	}
};
</script>

<style>
.page-account-login {
	background-color: #ffffff;
	height: 100vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background-image: url(../../static/logobg.png);
}

.loginindex {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.loginindex .welcome {
	display: block;
	padding: 42rpx 42rpx 0;
	font-size: 40rpx;
	line-height: 62rpx;
	color: #262626;
}

.loginindex .welcome text {
	display: block;
	color: #676767;
}

.loginindex .loginpic {
	display: block;
	width: 648rpx;
	margin: 95rpx auto 0;

	width: 100%;
	vertical-align: top;
}

.loginindex .loginbtn {
	display: block;
	width: 547rpx;
	height: 80rpx;
	padding: 0;
	font-size: 30rpx;
	line-height: 80rpx;
	text-align: center;
	color: #fff;
	border: 0;
	background: url(https://u-static.lmjx.net/2020/xcxjyh/images/login/loginbtn.png) center center no-repeat;
	background-size: 100% 100%;
}
.loginindex .loginbtnbd{
	margin-bottom: 40rpx;
	background: url(https://u-static.lmjx.net/2021/baidujiyouhui/images/loginbtn.png) center center no-repeat;
	background-size: 100% 100%;
}

.loginindex .loginbtn::after,
.loginindex .cancel::after {
	display: none;
}

.loginindex .cancel {
	display: block;
	width: 547rpx;
	height: 80rpx;
	margin: 18rpx auto 40rpx;
	padding: 0;
	font-size: 30rpx;
	line-height: 80rpx;
	text-align: center;
	color: #b1b1b1;
	border: 0;
	background: none;
}

.loginindex .pbin {
	display: flex;
	flex-direction: column;
	flex: 1;
	justify-content: flex-end;
}
</style>
